<template>
  <div>
    <div class="homeindex_top">
      <img src="../../../../assets/images/u58.png" alt="" />
    </div>

    <div class="content">
      <div class="tab_text">
        <div
          v-for="nav in list"
          :key="nav.id"
          :class="nav.booler ? 'tabture' : ''"
          @click="tab(nav.id)"
        >
          {{ nav.name }}
        </div>
      </div>
    </div>
    <div class="nvat_jichu">
      <div class="nvat_jichu_zixun">
        <div class="jichu_conact">
          <div class="nvat_jichu_zixun_img">
            <img src="../../../../assets/images/u6630.jpg" alt="" />
          </div>
          <div class="nvat_maging">
            <div class="nvat_text">
              <span>长者在我心中，服务在您身边</span>
              <span>2022-03-09</span>
            </div>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造
            </p>
            <div class="Gotodetails">
              <span>查看详情</span>
              <img src="../../../../assets/icon/icon_Right.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="nvat_jichu_zixun">
        <div class="jichu_conact">
          <div class="nvat_jichu_zixun_img">
            <img src="../../../../assets/images/u6630.jpg" alt="" />
          </div>
          <div class="nvat_maging">
            <div class="nvat_text">
              <span>长者在我心中，服务在您身边</span>
              <span>2022-03-09</span>
            </div>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造
            </p>
            <div class="Gotodetails">
              <span>查看详情</span>
              <img src="../../../../assets/icon/icon_Right.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="nvat_jichu_zixun">
        <div class="jichu_conact">
          <div class="nvat_jichu_zixun_img">
            <img src="../../../../assets/images/u6630.jpg" alt="" />
          </div>
          <div class="nvat_maging">
            <div class="nvat_text">
              <span>长者在我心中，服务在您身边</span>
              <span>2022-03-09</span>
            </div>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造
            </p>
            <div class="Gotodetails">
              <span>查看详情</span>
              <img src="../../../../assets/icon/icon_Right.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="nvat_jichu_zixun">
        <div class="jichu_conact">
          <div class="nvat_jichu_zixun_img">
            <img src="../../../../assets/images/u6630.jpg" alt="" />
          </div>
          <div class="nvat_maging">
            <div class="nvat_text">
              <span>长者在我心中，服务在您身边</span>
              <span>2022-03-09</span>
            </div>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造
            </p>
            <div class="Gotodetails">
              <span>查看详情</span>
              <img src="../../../../assets/icon/icon_Right.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="nvat_jichu_zixun">
        <div class="jichu_conact">
          <div class="nvat_jichu_zixun_img">
            <img src="../../../../assets/images/u6630.jpg" alt="" />
          </div>
          <div class="nvat_maging">
            <div class="nvat_text">
              <span>长者在我心中，服务在您身边</span>
              <span>2022-03-09</span>
            </div>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造
            </p>
            <div class="Gotodetails">
              <span>查看详情</span>
              <img src="../../../../assets/icon/icon_Right.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="nvat_jichu_zixun">
        <div class="jichu_conact">
          <div class="nvat_jichu_zixun_img">
            <img src="../../../../assets/images/u6630.jpg" alt="" />
          </div>
          <div class="nvat_maging">
            <div class="nvat_text">
              <span>长者在我心中，服务在您身边</span>
              <span>2022-03-09</span>
            </div>
            <p>
              近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云栖兰亭听取了健康服务公益基金的建议，匠心打造
            </p>
            <div class="Gotodetails">
              <span>查看详情</span>
              <img src="../../../../assets/icon/icon_Right.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pages">
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          background
          :page-sizes="[10, 20, 30]"
          :page-size="100"
          :total="1000"
          layout="prev, pager, next,sizes, jumper"
        >
        </el-pagination>
      </div>
    </div>
    <div style="height: 10rem"></div>
  </div>
</template>
<script>
let ulrr = window.location.search.substring(6) || "1";
export default {
  data() {
    return {
      currentPage4: 4,
      list: [
        {
          name: "最新资讯",
          url: "#",
          booler: true,
          id: "1",
        },
        {
          name: "行业动态",
          url: "#",
          booler: false,
          id: "2",
        },
        {
          name: "视频槿椿",
          url: "#",
          booler: false,
          id: "3",
        },
        {
          name: "长者风采",
          url: "#",
          booler: false,
          id: "4",
        },
      ],
      type: "1",
    };
  },
  created() {
    this.tab(ulrr);
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    tab(i) {
      for (const a of this.list) {
        if (a.id === i) {
          a.booler = true;
        } else {
          a.booler = false;
        }
      }
      this.type = i;
    },
  },
};
</script>
<style scoped>
.tab_text {
  display: flex;
  width: 100%;
  border-bottom: 3px solid #299399;
}

.tab_text > div {
  width: 30rem;
  height: 6rem;
  text-align: center;
  font-size: 2rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  line-height: 6rem;
}
.nvat_jichu {
  margin-top: 2.4rem;
}
.nvat_jichu > div {
  /* background: red; */
  display: flex;
  padding: 0 36rem 0px 36rem;
}
.nvat_jichu div:hover {
  background: #dbf1f2ff;
}
.nvat_jichu_zixun {
  margin-bottom: 2.4rem;
}
.nvat_jichu_zixun_img {
  width: 36rem;
  height: 24rem;
  /* 
  background-image: linear-gradient(to left, #ffffff, transparent),
    url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdik.img.kttpdq.com%2Fpic%2F24%2F16102%2Fade59ed7423e6ef9_1366x768.jpg&refer=http%3A%2F%2Fdik.img.kttpdq.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642818964&t=53b76f0…);
  background-position: center;
  background-blend-mode: initial; */
}
.nvat_jichu_zixun_img img {
  width: 100%;
  height: 100%;
}
.jichu_conact {
  display: flex;
  padding: 1.2rem 3rem 1.2rem 0;
}
.nvat_maging {
  margin: 4rem 4rem 3rem 4rem;
}
.nvat_text {
  display: flex;
  width: 80rem;
  justify-content: space-between;
}
.nvat_maging p {
  font-size: 2rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 2.4rem;
  line-height: 3.8rem;
  /* 超出省略 */
  width: 80rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 换行2段 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nvat_text span:nth-child(1) {
  font-size: 2.4rem;
  font-weight: bold;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  color: #299399;
  /* line-height: 24px; */
}
.nvat_text span:nth-child(2) {
  font-weight: 400;
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.85);
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
}
.Gotodetails {
  display: flex;
  margin-top: 2.5rem;
  align-items: center;
  justify-content: right;
}
.Gotodetails img {
  width: 1.6rem;
  height: 1.6rem;
}
.pages {
  padding: 0 36rem 0px 36rem;
  display: flex;
  justify-content: end;
}
</style>